'use client'

import React from 'react'
import { usePathname } from 'next/navigation'
import Link from "next/link"
import { Button } from "@/components/ui/button"

const links = [
  {
    href: '/manage',
    name: '文章管理'
  },
  {
    href: '/manage/import',
    name: '文章导入'
  },
  {
    href: '/manage/content',
    name: '内容数据'
  },
]

export default function Page({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  
  const pathname = usePathname()
  const Links = () => {
    return (
      links.map((link, index) => (
        <Link 
          key={index} 
          href={link.href}
        >
          <Button variant={pathname === link.href ? 'outline' : 'ghost'} className="w-full mb-2">{link.name}</Button>
        </Link>
      ))
    )
  }

  return (
    <div className="flex w-screen h-screen p-6">
      <aside className="w-40 mr-4 p-4 bg-white rounded">
        <Link href="/article/create">
          <Button className="w-full rounded-none">写文章</Button>
        </Link>
        <div className="mt-4">
          <Links/>
        </div>
      </aside>
      <main className="w-[calc(100vw-176px)] p-4 rounded bg-white overflow-auto">
        {children}
      </main>
    </div>
  )
}

